<template>
    <view>
        <view class="Warpper" v-if="pageData.length">
            <u-navbar title="邀请函" @rightClick="rightClick" :autoBack="true" placeholder :titleStyle="titleStyle"></u-navbar>

            <view class="Banner">
                <view class="banImg">
                    <image :src="$imgUrls(this.pageData[this.current].preview)" mode="aspectFit"></image>
                    <!-- <text class="toName">{{ to }}</text>
					<text class="formName">{{ from }}</text> -->
                </view>
            </view>
            <view class="Template">
                <text class="black size32">选择模版</text>
                <scroll-view scroll-x="true" class="rows nowrap scrollView">
                    <view class="list" v-for="(item, index) in pageData" :key="index" :class="{ Active: current == index }" @click="selceTemplate(index)">
                        <image :src="$imgUrls(item.preview)" mode="widthFix" class="wh"></image>
                    </view>
                </scroll-view>
            </view>

            <view class="footer">
                <view class="footerBox">
                    <view class="btns Edit" @click="editWriter">编辑文案</view>
                    <view class="btns generate" @click="ShareImg">生成邀请函</view>
                </view>
            </view>
            <!-- 	<canvas canvas-id="shareCanvas" :style="canvasStyle"> </canvas> -->
        </view>

        <!-- <view class="PopView" v-if="sharePicture">
			<image
				:src="$imgUrls(this.pageData[this.current].preview)"
				mode="widthFix"
				class="PopImg"></image>
			<view class="foot">
				<view class="fotBox">
					<view class="liss" @click="ShareImg">
						<view class="endie">
							<view class="iconfont icon-a-1"></view>
						</view>
						<text class="icon_text">发送给朋友</text>
					</view>
					<view class="liss" @click="Collect">
						<view class="endie">
							<view class="iconfont icon-shoucang"></view>
						</view>
						<text class="icon_text">收藏</text>
					</view>
					<view class="liss" @click="SaveImg">
						<view class="endie">
							<view class="iconfont icon-xiazai size60 color_33"></view>
						</view>
						<text class="icon_text">保存到相册</text>
					</view>
				</view>

				<view class="Cancel" @click.stop="sharePicture = false">取消</view>
			</view>
		</view> -->

        <u-popup :show="show" @close="show = false" :round="10" :closeOnClickOverlay="false" closeable bgColor="#ebebeb">
            <view class="upop">
                <view class="list">
                    <text class="name">受邀人</text>
                    <input type="text" class="toVal" v-model="to" />
                </view>
                <view class="list">
                    <text class="name">邀请人</text>
                    <input type="text" class="toVal" v-model="from" />
                </view>

                <view class="fotBtn" @click="subCop">提交文案</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                canvasStyle: 'position:fixed;left:-9999px;',
                titleStyle: {
                    fontWeight: 'bold'
                },
                // img: 'https://msraimgcdn.mogoie.com/6142/1735277489859.jpg',
                img: '',
                current: 0,

                order_id: '',
                to: '', //邀请人
                from: '', //受邀人
                pageData: [],
                sharePicture: false,
                show: false
            };
        },
        onLoad(opt) {
            if (opt.order_id) this.order_id = opt.order_id;
            this.Template();
        },
        methods: {
            Template() {
                this.$http
                    .get({
                        url: '/SiteApi/getInvitationTemplate'
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        result.forEach((item) => {
                            this.getInvitation(item);
                        });
                    });
            },
            getInvitation(tpl) {
                this.$showLoading('');
                this.$http
                    .get({
                        url: '/SiteApi/getInvitation',
                        data: {
                            tpl,
                            lock_order_id: this.order_id,
                            to: this.to,
                            from: this.from
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        result.tpl = tpl;
                        if (tpl == 'ch') result.to = '敬启尊客';
                        if (tpl == 'en') result.to = 'Dear';
                        if (result) this.pageData.push(result);
                        // this.img = this.pageData[0].preview;
                    });
            },

            subCop() {
                this.$showLoading('');
                const Item = this.pageData[this.current];
                this.$http
                    .get({
                        url: '/SiteApi/getInvitation',
                        data: {
                            tpl: Item.tpl,
                            lock_order_id: this.order_id,
                            to: this.to,
                            from: this.from
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        result.tpl = Item.tpl;
                        this.pageData[this.current].preview = result.preview;
                        this.show = false;
                    });
            },

            editWriter() {
                this.to = this.pageData[this.current].to;
                this.from = this.pageData[this.current].from;
                this.show = true;
            },

            selceTemplate(index) {
                this.img = this.pageData[index].preview;
                this.current = index;
            },

            SaveImg() {
                uni.downloadFile({
                    url: this.pageData[this.current].preview,
                    success: (res) => {
                        const tempFilePath = res.tempFilePath;
                        uni.saveImageToPhotosAlbum({
                            filePath: tempFilePath,
                            success: () => {
                                this.$Toast('已保存到相册');
                            },
                            fail: () => {
                                this.$Toast('保存失败，请检查相册权限');
                            }
                        });
                    }
                });
            },
            Collect() {
                uni.downloadFile({
                    url: this.pageData[this.current].preview,
                    success: (res) => {
                        const tempFilePath = res.tempFilePath;
                        // #ifdef MP-WEIXIN
                        wx.addFileToFavorites({
                            filePath: tempFilePath,
                            success: () => {
                                this.$Toast('收藏成功');
                            },
                            fail: () => {
                                this.$Toast('收藏失败');
                            }
                        });
                        // #endif
                    }
                });
            },

            ShareImg() {
                uni.downloadFile({
                    url: this.pageData[this.current].preview,
                    success: (res) => {
                        const tempFilePath = res.tempFilePath;
                        // #ifdef MP-WEIXIN
                        wx.showShareImageMenu({
                            path: tempFilePath,
                            success: (res) => {
                                console.log('分享成功:', res);
                            },
                            fail: (err) => {
                                console.log('分享取消:', err);
                            }
                        });
                        // #endif
                    }
                });
            }
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $pages;
        padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    }
</style>
<style lang="scss" scoped>
    .Warpper {
        width: 100%;

        display: flex;
        flex-direction: column;
    }
    .Banner {
        width: 100%;
        height: 900rpx;
        background-color: #f8dec7;
        padding: 30rpx 0;
        display: flex;
        justify-content: center;
        overflow: hidden;
        .banImg {
            width: 410rpx;
            position: relative;
            .toName {
                color: #000;
                font-size: 22rpx;
                position: absolute;
                left: 30rpx;
                top: 40%;
            }
            .formName {
                color: #000;
                font-size: 22rpx;
                position: absolute;
                right: 30rpx;
                bottom: 20%;
            }
        }
    }
    .Template {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 30rpx;
        .scrollView {
            width: 100%;
            margin-top: 30rpx;
            .list {
                width: 220rpx;
                height: 100%;
                display: inline-block;
                margin-right: 24rpx;
                border: 1px solid #ddd;
                border-radius: 10rpx;
                padding: 0 14rpx;
                position: relative;
                .listImg {
                    width: 100%;
                    position: relative;
                    height: 100%;
                }
            }
            .Active {
                border: 1px solid $btnColor;
            }
        }
    }
    .footer {
        width: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);

        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #edeaed;
        border-top: 1px solid #ddd;
        .footerBox {
            display: flex;
            padding: 20rpx 0;
            justify-content: space-around;
            .btns {
                width: 330rpx;
                height: 88rpx;
                border: 1px solid $btnColor;
                border-radius: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
                font-weight: bold;
            }
            .Edit {
                background-color: #fff;
                color: $btnColor;
            }
            .generate {
                background-color: $btnColor;
                color: #fff;
            }
        }
    }

    .content {
        width: 100%;
        position: absolute;
        top: 20%;
        left: 0;
        z-index: 10;
        display: flex;
        flex-direction: column;

        .txtWen {
            color: #333;
            font-size: 20rpx;
            scale: 0.8;
        }
    }

    .upop {
        width: 100%;
        padding: 100rpx 30rpx 200rpx 30rpx;
        .list {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 40rpx;
            .name {
                color: #666;
                font-size: 30rpx;
                margin-right: 20rpx;
            }
            .toVal {
                flex: 1;
                height: 80rpx;
                border: 1px solid #ddd;
                background-color: #e5e5e5;
                border-radius: 8rpx;
                padding: 0 20rpx;
                text-align: right;
                font-size: 30rpx;
                color: #000;
            }
        }
        .fotBtn {
            width: 100%;
            height: 84rpx;
            color: #fff;
            font-size: 30rpx;
            background-color: $color_d85;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 60rpx;
        }
    }

    .PopView {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        .PopImg {
            width: 680rpx;
            z-index: 101;
        }
        .foot {
            width: 100%;
            background-color: #dcd9dc;
            border-radius: 10rpx 10rpx 0 0;

            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2000;
            .fotBox {
                width: 100%;
                display: flex;
                padding: 50rpx 60rpx 0 60rpx;
                align-items: center;
                justify-content: space-around;
                .liss {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .endie {
                        width: 100rpx;
                        height: 100rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #fff;
                        border-radius: 20rpx;
                        .icon-a-1 {
                            color: #1ab05c;
                            font-size: 68rpx;
                        }
                        .icon-shoucang {
                            color: #e64d4d;
                            font-size: 60rpx;
                        }
                    }
                    .icon_text {
                        color: #666;
                        font-size: 20rpx;
                        margin-top: 10rpx;
                    }
                }
            }
            .Cancel {
                width: 100%;
                height: 100rpx;
                padding: 30rpx 0 100rpx 0;
                margin-top: 50rpx;
                background-color: #edeaed;
                color: #000;
                font-size: 30rpx;
                display: flex;
                justify-content: center;
            }
        }
    }
</style>
